import Vue from 'vue';
import Vuex from 'vuex';//2.0版本  npm i vuex@3
import setting from './module/setting'
import latlon from './module/latlon'

Vue.use(Vuex);
const state = { //要设置的全局访问的state对象,赋予初始属性值
    themeColor: {val: 'blue', opacity: false},
    changeThemeCount: 0,
    cache: '',
    mapMode: '3D',
};
const getters = {   //实时监听state值的变化(最新状态)
    getThemeColor(state) {  //定义函数，返回处理过的val，命名最好有代表性
        let hour = new Date().getHours();
        // 如果白天则主题色不透明，反之
        state.themeColor.opacity = 8 <= hour && hour <= 20;
        return state.themeColor
    },
    getMapMode: state => state.mapMode,
};
const mutations = {
    //自定义改变state初始值的方法，这里面的参数除了state之外还可以再传额外的参数(变量或对象);
    clearCatch(state) {
        state.cache = "";
        state.changeThemeCount = 0;
    },
    setThemeColor(state, color, opacity) {
        state.themeColor.val = color;
        state.themeColor.opacity = opacity;
        state.changeThemeCount++;
    },
    updateMapMode(state, mode) {
        state.mapMode = mode;
    }
};
const actions = {
    //自定义触发mutations里函数的方法，context与store 实例具有相同方法和属性
    setThemeColorAction(context, color, opacity) {
        context.commit('setThemeColor', color, opacity);
    }
};
const store = new Vuex.Store({
    state, // 挂载存取数据功能
    getters, //挂载数据计算功能
    mutations, // 挂载函数功能
    actions, // 挂载异步函数
    modules: { // 挂载子仓库
        setting,latlon
    }
});
export default store;
